<template>
  <el-container class="ly-desktop h-100"
                :class="{'is-on-theme-setting shadow-lg':isShowThemeSettings}">
    <ly-aside />
    <el-container>
      <el-header class="p-0"
                 height="auto">
        <ly-toolbar />
        <ly-tabs />
      </el-header>
      <ly-tab-content />
      <el-footer class="d-flex align-items-center justify-content-between border-top bg-white main-footer"
                 height="30px">
        <el-link href="http://baidu.com"
                 target="_blank"
                 type="primary"
                 underline="false">
          <ju-icon class="me-1"
                   icon="patch-question-fill"
                   svg-icon />
          <small>问题反馈</small>
        </el-link>
        <div><strong> Copyright © 2023 {{ company }}</strong> All rights reserved. </div>
      </el-footer>
    </el-container>
  </el-container>
</template>

<script lang="ts">
  import { Component, Vue } from "@some21/vue-class-decorator";
  import DrawerThemeSettingsStore from "./components/ThemeSettings/store";
  import { IS_PROD } from "@/framework/settings/config";
  import { GlobalTooltipStore } from "@/framework/store/GlobalTooltipStore";
  import JuWaterMark from "@/components/JuWaterMark";

  @Component({
    name: "Index-App",
    components: {
      LyAside: () => import("./components/Layout/LyAside/main.vue"),
      LyTabs: () => import("./components/Layout/LyTabs.vue"),
      LyToolbar: () => import("./components/Layout/LyToolbar/main.vue"),
      LyTabContent: () => import("./components/Layout/LyTabContent.vue"),
    },
  })
  export default class extends Vue {
    get isShowThemeSettings() {
      return DrawerThemeSettingsStore.visible;
    }
    // get question() {
    //   return SystemModule.question;
    // }
    get toolTipElement() {
      return GlobalTooltipStore.currentToolTipElement;
    }
    get globalTooltipShow() {
      return GlobalTooltipStore.show;
    }
    get globalTooltipContent() {
      return GlobalTooltipStore.Content;
    }

    waterMark;
    created() {
      if (IS_PROD) {
        this.waterMark = JuWaterMark.show();
      }
    }
    beforeDestroy() {
      this.waterMark?.$destroy();
    }
    readonly company = process.env.VUE_APP_COMPANY;
  }
</script>

<style lang="scss" scoped>
  .ly-desktop {
    min-width: 1000px;
    min-height: 600px;
  }
  .main-footer {
    font-size: 12px;
  }
  .ly-desktop {
    transition: all 0.2s;
  }
  .is-on-theme-setting {
    margin-right: 280px;
    border-radius: calc(var(--theme-radius) * 4);
    overflow: hidden;
    transform: scale(0.95);
  }
</style>
